<template>
  <view :class="theme">
    <view class="fixed top-0 bottom-0 left-[var(--window-left)] right-[var(--window-right)]"
      style="background-image: linear-gradient(37deg,rgba(8, 23, 49, 0.6),rgba(39, 8, 39, 0.6));" />

    <view class="z-1" style="padding: calc(var(--window-top) + 44rpx) 44rpx 44rpx; min-height: 100vh;">
      <view class="mt-30">
        <view v-for="(item, index) in options.list" :key="index"
          class="relative mb-30 b-rounded-20 p-36 flex-row items-center"
          style=" box-shadow: 0 0 12rpx 0 rgba(200,200,200,0.1);  backdrop-filter: blur(30rpx);">
          <label class="flex-1">
            <uv-image width="100" height="100" :src="include(`/static/img/pond/${index + 1}.png`)" mode="aspectFit)" />
            <label class="items-baseline ml-24 italic color-label fw-bold">
              <text class="text-36">{{ item.name }}</text>
              <text class="ml-12 text-28">{{ item.coin }}</text>
            </label>
          </label>
          <text v-if="item.num" class="fw-700 color-stress">
            <text class="text-50">{{ item.num }}</text>
            <text class="text-26">人</text>
          </text>
        </view>

        <view class="m-30 items-center z-9">
          <uv-image v-if="!options.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
            src="/static/img/blank.png" mode="aspectFit" />
          <uv-load-more :status="options.status" :is-dot="!!options.list.length" icon-color="#eee" color="#eee" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
onPageScroll((e) => {
  uni.setNavigationBarColor({
    frontColor: "#ffffff",
    backgroundColor: e.scrollTop > 30 ? "rgba(22, 7, 40, 1)" : "rgba(22, 7, 40, 0.1)"
  })
});

const options = reactive({
  list: [] as AnyObject[],
  status: "loadmore"
});

onLoad(() => {
  options.status = "loading";
  uni.request({
    url: "/bonusList",
    success({ data }: AnyObject) {
      options.status = "nomore";
      options.list = data;
    }
  });
})

</script>

<style lang="scss" scoped>
// scss
</style>